import React from "react";
import { compose, lifecycle, withState } from "recompose";

const handler = function() {};
const fetchData = () => {
  fetch("http://baidu.com")
    .then((res) => res.text())
    .then((body) => {
      console.table(body);
    });
};
const enhance = compose(
  // 3. wrapper hell
  lifecycle({
    componentDidMount() {
      // 1 .side effect
      window.addEventListener("resize", handler);
      fetchData();
    },
  }),
  withState("counter", "setCounter", 0),
  withState("name", "setName", "yang"),
  withState("isLoading", "setIsLoading", false)
);
const _onClick = (props) => (MouseEvent) => {
  // 2. dep problem
  console.log(MouseEvent,props);
};
const FunctionComponent = (props) => {
  return <button onClick={_onClick(props)}>click me</button>;
};
export default enhance(FunctionComponent);
